<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS3 学习指南</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            line-height: 1.6;
            margin: 0;
            padding: 20px;
            color: #333;
            background-color: #f9f9f9;
        }
        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 20px;
            background-color: white;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
            border-radius: 5px;
        }
        h1 {
            color: #0066cc;
            border-bottom: 2px solid #0066cc;
            padding-bottom: 10px;
            text-align: center;
        }
        h2 {
            color: #0099cc;
            margin-top: 30px;
            border-left: 4px solid #0099cc;
            padding-left: 10px;
        }
        .intro {
            background-color: #f5f5f5;
            border-left: 4px solid #0066cc;
            padding: 15px;
            margin: 20px 0;
            border-radius: 0 4px 4px 0;
        }
        .tutorial-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
            gap: 20px;
            margin: 30px 0;
        }
        .tutorial-card {
            border: 1px solid #ddd;
            border-radius: 5px;
            padding: 20px;
            background-color: #fff;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }
        .tutorial-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
        }
        .tutorial-card h3 {
            color: #00aadd;
            margin-top: 0;
            border-bottom: 1px solid #eee;
            padding-bottom: 10px;
        }
        .tutorial-card p {
            color: #666;
        }
        .tutorial-card a {
            display: inline-block;
            margin-top: 10px;
            padding: 8px 15px;
            background-color: #0066cc;
            color: white;
            text-decoration: none;
            border-radius: 4px;
            transition: background-color 0.3s ease;
        }
        .tutorial-card a:hover {
            background-color: #0055aa;
        }
        .footer {
            text-align: center;
            margin-top: 50px;
            padding-top: 20px;
            border-top: 1px solid #ddd;
            color: #777;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>CSS3 学习指南</h1>
        
        <div class="intro">
            <p>欢迎来到 CSS3 学习指南！本教程将全面介绍 CSS3 的各项功能和特性，从基础选择器到高级布局技术，从颜色与渐变到动画与过渡效果。无论您是初学者还是想要提升 CSS 技能的开发者，这里都能找到有价值的内容。</p>
            <p>CSS3 是层叠样式表（Cascading Style Sheets）的最新标准，它极大地扩展了 CSS 的功能，使网页设计更加灵活、动态和富有表现力。通过本教程，您将学习如何利用这些强大的功能创建现代、响应式的网页设计。</p>
        </div>
        
        <h2>教程目录</h2>
        
        <div class="tutorial-grid">
            <div class="tutorial-card">
                <h3>CSS3 选择器</h3>
                <p>学习 CSS3 的各种选择器，包括基本选择器、组合选择器、属性选择器、伪类和伪元素选择器等。掌握如何精确地选择和样式化 HTML 元素。</p>
                <a href="css3-selectors.html">开始学习</a>
            </div>
            
            <div class="tutorial-card">
                <h3>CSS3 盒模型</h3>
                <p>深入理解 CSS 盒模型的概念，包括内容区域、内边距、边框和外边距。学习 box-sizing 属性、边框圆角、盒阴影等 CSS3 新特性。</p>
                <a href="css3-box-model.html">开始学习</a>
            </div>
            
            <div class="tutorial-card">
                <h3>Flexbox 布局</h3>
                <p>掌握 Flexbox 布局模型，这是一种强大的一维布局方法，特别适合于创建灵活的响应式设计。学习如何轻松对齐和分配空间。</p>
                <a href="css3-layout-flexbox.html">开始学习</a>
            </div>
            
            <div class="tutorial-card">
                <h3>Grid 布局</h3>
                <p>探索 CSS Grid 布局，这是一种二维布局系统，为创建复杂的网页布局提供了前所未有的控制能力。学习如何创建网格和定位元素。</p>
                <a href="css3-layout-grid.html">开始学习</a>
            </div>
            
            <div class="tutorial-card">
                <h3>颜色与渐变</h3>
                <p>了解 CSS3 中的颜色表示方法，包括 RGB、RGBA、HSL 和 HSLA。学习如何创建线性渐变、径向渐变和锥形渐变效果。</p>
                <a href="css3-colors-gradients.html">开始学习</a>
            </div>
            
            <div class="tutorial-card">
                <h3>变换</h3>
                <p>学习 CSS3 变换，包括 2D 和 3D 变换。掌握如何旋转、缩放、倾斜和平移元素，以及如何创建 3D 效果。</p>
                <a href="css3-transforms.html">开始学习</a>
            </div>
            
            <div class="tutorial-card">
                <h3>过渡与动画</h3>
                <p>探索 CSS3 过渡和动画功能，学习如何创建平滑的状态变化和复杂的动画序列，无需 JavaScript 或 Flash。</p>
                <a href="css3-transitions-animations.html">开始学习</a>
            </div>
            
            <div class="tutorial-card">
                <h3>响应式设计</h3>
                <p>掌握响应式网页设计的原则和技术，学习如何创建在各种设备和屏幕尺寸上都能良好显示的网站。</p>
                <a href="css3-responsive.html">开始学习</a>
            </div>
        </div>
        
        <h2>学习建议</h2>
        <div class="intro">
            <p>为了获得最佳学习效果，建议按照以下顺序学习：</p>
            <ol>
                <li>首先学习 CSS3 选择器和盒模型，这是 CSS 的基础知识</li>
                <li>然后学习 Flexbox 和 Grid 布局，这些是现代 CSS 布局的核心</li>
                <li>接着学习颜色、渐变和变换，这些可以增强网页的视觉效果</li>
                <li>最后学习过渡、动画和响应式设计，这些是创建现代、交互式网页的关键</li>
            </ol>
            <p>每个教程都包含详细的解释、代码示例和实际演示，帮助您更好地理解和应用所学知识。</p>
        </div>
        
        <div class="footer">
            <p>&copy; 2023 CSS3 学习指南。保留所有权利。</p>
        </div>
    </div>
</body>
</html>